<template>

  <m-table
      ref="table"
      :data="results"
      :view="view"
      :buttons="buttons"
      :columns="columns"
      :loading="loading"
      :sortable-callback="$sort"
      row-key="id"
  >

    <!--  Cell  -->
    <template #cell="{field, row, prop}">
      {{ getValue(prop, row) }}
    </template>

    <!--  Popover  -->
    <template #pop-index="{row}">
      <d-table-pop-controller
          :selection="selection"
          @remove="remove"
          @open="$open"
      ></d-table-pop-controller>
    </template>
    <template #pop-cell="{data, prop}">
      <d-cell :view="view" :prop="prop" :bean="data" :db="db"/>
    </template>
    <template #pop-meta="{view}">
      <el-tag hit effect="plain">{{ view.code }}</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-button
          size="small" type="info" plain
          @click="table.closePopover()"
      >close
      </el-button>
    </template>
    <template #pop-search="{field}">
      search = {{ field.prop }}
    </template>
    <template #pop-field="{field}">
      field = {{ field.prop }}
    </template>
    <!--  Outer  -->
    <template #header>
      <slot name="header">
        {{ view.meta_name }}
      </slot>
    </template>
    <template #header-tool>
      <el-progress
          v-if="status.loading"
          striped
          striped-flow
          :percentage="status.payload?.percentage||0"
          :stroke-width="26"
          text-inside
          status="success"
          style="width: 200px; border: 1px solid #cccccc; background: #cccccc; border-radius: 13px"
      ></el-progress>
      <d-table-controller
          v-else
          :selection="selection"
          @upload="$upload"
          @open="$open"
          @remove="remove"
      ></d-table-controller>
      <!--      @download="$download"-->
      <!--          @copy="$copy"-->
    </template>
    <template #footer>
      <el-pagination
          :total="info.total"
          v-model:current-page="info.page"
          v-model:page-size="info.size"
          :page-sizes="[10,20,50,100]"
          layout="sizes, prev, pager, next"
      ></el-pagination>
    </template>
    <template #footer-tool>
      <el-tag type="info" effect="plain" hit size="large">
        共 {{ info.total }} 条
      </el-tag>
    </template>
  </m-table>

  <m-dialog ref="dialog" :cancel="$cancel" :confirm="$confirm">
    <template #default="{data}">
      <d-form
          ref="form"
          :selection="selection"
          :view="view"
          :db="db"
          :bean="data"
      ></d-form>
    </template>
  </m-dialog>
</template>

<script setup lang="ts">
import {ref} from "vue";
import type {DTableProps} from "../../../types/table/m.table.types";
import {useDTable} from "./useDTable";
import DTablePopController from "./DTablePopController.vue";
import DTableController from "./DTableController.vue";
import _ from "lodash";
import DForm from "./DForm.vue";
import {$message} from "../../../tools/feedback";
import useDTableCell from "./useDTableCell";
import DCell from "./DCell.vue";
// import {useMorghulisDao} from "../../../tools/dao_morghulis.ts";
// import type {DTableProps} from "../../../types/table/m.table.types.ts";
// import {useDTable} from "./useDTable.ts";
// import _ from "lodash";
// import {Query} from "../../../tools/query.ts";
// import {$confirm, $message} from "../../../tools/feedback.ts";
//


const props = withDefaults(
    defineProps<DTableProps>(),
    {
      size: 10, page: 1,
    }
)
const table = ref()
const {
  meta,
  query,
  view,
  info,
  results,
  selection,
  status,
  loading,
  load, remove, upload, collect
} = useDTable(table, props)

const {getValue} = useDTableCell(view)

const dialog = ref()
const form = ref()

function $open() {
  table.value.closePopover()
  collect((bean) => {
    dialog.value.open(bean)
  })
}

function $confirm(data: any, done: Function) {
  const array = form.value.getData()
  if (array.length) {
    upload(array)
  } else {
    $message.info('数据无变化')
  }
  done()
}

function $cancel(data: any, done: Function) {
  if (!data.saved) {
    remove(data.id)
  }
  done()
}

// function $copy() {
//
// }
//
// function $download() {
//
// }
//
function $upload() {
  const data = _.range(5000).map(i => ({name: i}))
  upload(data)
}

function $sort(newIndex: number, oldIndex: number) {
  const data = results.value
  const ids = data.map(row => row.id)
  const sorts = data.map(row => row.sort)
  const minIndex = Math.min(newIndex, oldIndex)
  const maxIndex = Math.max(newIndex, oldIndex)
  const currentId = ids.splice(oldIndex, 1)[0]
  ids.splice(newIndex, 0, currentId)
  const items = _.range(minIndex, maxIndex + 1).map(i => ({id: ids[i], sort: sorts[i]}))
  if (items.length > 1) upload(items)
}

// const selection = computed<any[]>(() => table.value?.getSelection() || [])
// console.log(selection)
//
// const {
//   query, info, results, view,
//   load,
//   drop,
//   save,
//   remove,
//   upload,
//   status,
//   loading,
// } = useMorghulisDao(table, meta, queryBean)
//
</script>
